<div id="booking_step2" class="active">
    <form action="book.php" method="POST" >
    <table width="100%" cellspacing="0" border="0">
        <tr class="row"><td><h2 style="color:#000;">Credit Card Information</h2></td></tr>
        <tr><td><label>Card Type:</label></td></tr>
        <tr>
            <td>
                <input id="creditCardInformation.cardType.continue" type="hidden" value="0" />
                <select name="creditCardInformation.cardType" 
                        onChange="checkCardType(this, 'erorCardType', 'creditCardInformation.cardType.continue');" />
                    <option value="VI">Visa</option>
                    <option value="CA">MasterCard</option>
                    <option value="" selected="selected">- Select Your Card Type -</option>
                </select>
                <div class="error" id="erorCardType"></div>
            </td>
        </tr>
        <tr><td><label>Card Number</label></td></tr>
        <tr>
            <td>
                <input id="creditCardInformation.creditCardNumber.continue" type="hidden" value="0" autocomplete="off" />
                <input maxlength="19" name="creditCardInformation.cardNumber" 
                       autocomplete="off" type="text" 
                       onBlur="checkCreditCardNumber(this, 'creditCardError', 'creditCardInformation.creditCardNumber.continue');" />
                <div class="error" id="creditCardError"></div>
            </td>
        </tr>
        <tr><td><label>Cardholder First Name</label></td></tr>
        <tr>
            <td>
                <input id="creditCardInformation.cardHolderFirstName.continue" type="hidden" 
                       value="0" />
                <input maxlength="100" autocomplete="off" 
                       name="cerditCardInformation.cardHolderFirstName" 
                       value="" type="text" 
                       onBlur="checkNameValidity(this, 'errorCardHolderFirstName', 'creditCardInformation.cardHolderFirstName.continue');" />
                <div class="error" id='errorCardHolderFirstName'></div>
            </td>
        </tr>
        <tr><td><label>Cardholder Last Name</label></td></tr>
        <tr>
            <td>
                <input id="creditCardInformation.cardHolderLastName.continue" type="hidden" 
                       value="0" />
                <input maxlength="100" name="creditCardInformation.cardHolderLastName" autocomplete="off" 
                       value="" type="text" 
                       onBlur="checkNameValidity(this, 'errorCardHolderLastName', 'creditCardInformation.cardHolderLastName.continue');" />
                <div class="error" id="errorCardHolderLastName"></div>
            </td>
        </tr>
        <tr><td><label for="expiration-date" on> Expiration Date</label></td></tr>
        <tr>
            <td>
                <!--(yearobj,monthId,errorId,idValidity,idValidityYear,idValidityMonth)-->
                <input id="creditCardInformation.expirationDate.Month.continue" type="hidden" value="0" />
                <input id="creditCardInformation.expirationDate.Year.continue" type="hidden" value="0" />
                <input id="creditCardInformation.expirationDate.continue" type="hidden" value="0" />

                <select name="creditCardInformation.expirationDate.month" 
                        id='creditCardInformation.ExpirationDate.Month' 
                        onChange="checkExpirationDateMonth('creditCardInformation.expirationDate.year', 'creditCardInformation.ExpirationDate.Month', 'errorCreditCardExpirationDate', 'creditCardInformation.expirationDate.continue', 'creditCardInformation.expirationDate.Year.continue', 'creditCardInformation.expirationDate.Month.continue');">
                    <option value="" selected="selected">-- Month -</option>
                    <option value="01">01-January</option>
                    <option value="02">02-February</option>
                    <option value="03">03-March</option>
                    <option value="04">04-April</option>
                    <option value="05">05-May</option>
                    <option value="06">06-June</option>
                    <option value="07">07-July</option>
                    <option value="08">08-August</option>
                    <option value="09">09-September</option>
                    <option value="10">10-October</option>
                    <option value="11">11-November</option>
                    <option value="12">12-December</option>
                </select>
                {assign var=startYear value=$smarty.now|date_format:"%Y"}
                {assign var=endYear value=$startYear+10}
                <select name="creditCardInformation.expirationDate.year" 
                        id="creditCardInformation.expirationDate.year" 
                        onChange="checkExpirationDate(this, 'creditCardInformation.ExpirationDate.Month', 'errorCreditCardExpirationDate', 'creditCardInformation.expirationDate.continue', 'creditCardInformation.expirationDate.Year.continue', 'creditCardInformation.expirationDate.Month.continue');" >
                    <option value="" selected="selected">- Year -</option>
                    {section name=yearValue start=$startYear loop=$endYear step=1}
                        <option value="{$smarty.section.yearValue.index}">{$smarty.section.yearValue.index}</option>
                    {/section}

                </select>
                <div class="error" id="errorCreditCardExpirationDate"></div>
            </td>
        </tr>
        <tr><td><label for="security-code">Security Code</label></td></tr>
        <tr>
            <td>  
                <input id="creditCardInformation.securityCode.continue" type="hidden" value="0" />
                <input maxlength="4" name="creditCardInformation.securityCode" autocomplete="off" type="text" onBlur="checkCardSecurityCode(this, 'errorCardSecurityCode', 'creditCardInformation.securityCode.continue');" />
                <div class="error" id="errorCardSecurityCode"></div>
            </td>
        </tr>
        <tr><td class="row"><h2 style="color:#000;">Billing Address:</h2></td></tr>
        <tr><td><p class="checkout-info-label">The billing address provided must match the credit card that is used to reserve your room.</p></td></tr>
        <tr><td><label>Country</label></td></tr>
        <tr>
            <td>
                <select name="billingAdress.country" id="country_select" class="select countries-list index" 
                        onChange="checkCountry(this, 'stateField', 'stateLebel', 'billingAdress.stateField.continue');">
                    {foreach from=$countries item=country}
                    <option value="{$country.CountryCode}"   {if $country@first}selected{/if}>{$country.CountryName}</option>
                    {/foreach}                                                 
                </select>
            </td>
        </tr>
        <tr><td><label for="street-address">Street Address</label></td></tr>
        <tr>
            <td>
                <input id="billingAddress.streetAddres.part1.continue" type="hidden" value="" />
                <input maxlength="50" name="billingAddress.streetAddres.part1" type="text" value="" onBlur="checkStreetValidity(this, 'errorStreetAddres', 'billingAddress.streetAddres.part1.continue')" onLoad="checkStreetValidity(this, 'errorStreetAddres', 'billingAddress.streetAddres.part1.continue')" />
                <div id='errorStreetAddres' class="error"></div>
            </td>
        </tr>
        <tr><td><input type="hidden" maxlength="50" name="billingAddress.streetAddres.part2" /></td></tr>
        <tr><td><label>City</label></td></tr>
        <tr>
            <td>
                <input id="billingAdress.city.continue" type="hidden" value="" />
                <input  maxlength="20" name="billingAddress.city" type="text" value="" onBlur="checkCityValidity(this, 'errorCity', 'billingAdress.city.continue')" />
                <div id='errorCity' class="error">
                </div>
            </td>
        </tr>
        <tr><td><label>Postal / Zip Code</label></td></tr>
        <tr>
            <td>
                <input id="billingAdress.zipCode.continue" type="hidden" value="" onBlur="checkZipCode(this, 'errorZipCode', 'billingAdress.zipCode.continue')" />
                <input maxlength="20" name="billingAddress.zipCode" type="text" value="" onblur="checkZipCode(this,'errorZipCode','billingAdress.zipCode.continue')">
                <div class="error" id="errorZipCode">
                </div>
            </td>
        </tr>
        <tr class="active" id="stateLebel"><td><label>State</label></td></tr>
        <tr id="stateField" class="active">
            <td>
                <input id="billingAdress.stateField.continue" type="hidden" value="1" />
                <select id="country_US_states" name="billingAddress.state" onChange="checkState(this, 'stateFieldError', 'billingAdress.stateField.continue')">
                {foreach from=$states item=state}
                    {if $state.CountryId eq 201}
                        <option value="{$state.StateCode}">{$state.StateName}, {$state.StateCode}</option>
                    {/if}
                {/foreach}
                </select>
                <div class="error" id='stateFieldError'></div>
            </td>
        </tr>
        <tr>
            <td>
                <div id="cancelationPolicy">
                    <table><tr><td><h2>Cancelation Policy</h2></td><td></td></tr>
                        <tr><td><span> {$cancellationPolicy}</span></td><td></td></tr>
                    </table>
                </div>
                
                <label>   
                   
                    <p> <input id="termsAndConditions" name="termsAndConditions" value="true" type="checkbox" onClick="checkForm(this, 'completeReservationButton')" autocomplete="off" />
By proceeding with this reservation, you agree to all <a href="http://travel.ian.com/index.jsp?pageName=userAgreement&locale=en_US&cid=xxx" target="_blank">Terms and Conditions</a>, which include the Cancellation Policy and all terms and conditions contained in the User Agreement. 
                        You agree to pay the cost of your reservation. If you do not pay this debt and it is collected through the use of a collection agency, an attorney, or through other legal proceedings, 
                        you agree to pay all reasonable costs or fees, including attorney fees and court costs, incurred in connection with such collection effort.</p>
                    
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <input name="currentPage"           type="hidden" value="bookingPage.php"/>
                <input name="hotelId"               type="hidden" value="{$hotelinfo.hotelId}"/>
                <input name="supplierType"          type="hidden" value="{$hotelinfo.supplierType}"/>
                <input name="roomRateKey"           type="hidden" value="{$hotelinfo.rateKey}"/>
                <input name="roomRateCode"          type="hidden" value="{$hotelinfo.rateCode}"/>
                <input name="roomTypeCode"          type="hidden" value="{$hotelinfo.roomTypeCode}"/>
                <input name="hotelImage"            type="hidden" value="{$hotelinfo.thumbnailUrl}"/>
                <input name="hotelName"             type="hidden" value="{$hotelinfo.hotelName}"/>
                <input name="roomDescription"       type="hidden" value="{$hotelinfo.roomTypeString}"/>
                <input name="averageRate"           type="hidden" value="{$hotelinfo.averageRate}"/>
                <input name="total"                 type="hidden" value="{$hotelinfo.total}"/>
                <input name="nightlyRateTotal"      type="hidden" value="{$hotelinfo.nightlyRatesTotal}"/>
                <input name="surchargeTotal"        type="hidden" value="{$hotelinfo.surchargeTotal}"/>
                <input name="currencyCode"          type="hidden" value="{$hotelinfo.currencyCode}"/>
                <input name="contactDetails_email" type="hidden" value="{$contactinfo.email}" />
                <input name="contactDetails_confirmEmail" type="hidden" value="{$contactinfo.confirmEmail}" />
                <input name="contactDetails_phoneNumber" type="hidden"  value="{$contactinfo.phone}" />
                {foreach from=$contactinfo.rooms key=ind item=guest}
                <input name="guest_firstName{$ind}" type="hidden" value="{$guest.firstname}" />
                <input name="guest_lastName{$ind}" type="hidden" value="{$guest.lastname}" />
                <input name="rooms{$ind}_smokingPreferenceId" type="hidden" value="{$guest.smokingPreference}" />
                {/foreach}
                
            </td>
        </tr>
        <tr>
            <td align="right">
                <button id="completeReservationButton" disabled type="submit"  name="book" value="book">
                    Complete Reservation
                </button>
            </td>
        </tr>
    </table>
    </form>
</div>
{literal}
    <script>
        $(document).ready(function() {
            if($("#country_US_states option:selected").val() === "US"){
                showState();
            } else {
                hideState();
            }
        });
    var hideState = function(){
        $("#stateField.active").removeClass("active").addClass("inactive");
        $("#stateLebel.active").removeClass("active").addClass("inactive");
    }, showState = function(){
        $("#stateField.inactive").removeClass("inactive").addClass("active");
        $("#stateLebel.active").removeClass("active").addClass("inactive");
    };
    </script>
{/literal}